<template>
  <div>
    <proposer></proposer>
    <!-- <div class="zhezhao">
      <van-loading type="spinner" />
    </div> -->
    <div class="header">
      <van-image width="100vw"
                 height="250"
                 :src="shouye" />
      <!-- <img src="@/assets/img/shouye.jpg"
           alt=""> -->
    </div>
    <div :class="{ sticky: isSticky }">
      <div class="nav">
        <div class="nav-top">
          <el-dropdown v-for="(item,index) in 3"
                       :key="index"
                       @click.native="change(index)"
                       :class="{active:index==current}"
                       trigger="click">
            <span class="el-dropdown-link">
              {{zhineng[index]}}<span class="el-dropdown-link">
                <i class="el-icon-arrow-down"
                   ref="ic"></i>
              </span>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item1,index1) in xq[index]"
                                :key="index1">{{item1}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="nav-cen"
             v-if="shows">
          <van-field v-model="value"
                     placeholder="请输入职位名" />
          <van-button type="info"
                      @click="search">搜索</van-button>
        </div>
        <div class="nav-bom">
          <span class="position">共{{page.TotalItems}}个职位</span>
          <span class="text"
                v-if=isShow
                @click="load">
            获取所有职位
          </span>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="box-c">
        <van-list v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad">
          <van-card v-for="item in arr"
                    :key="item.Id"
                    @click.native="tiaozhuan(item.Id)">
            <template #thumb>
              <img src="@/assets/img/logo.png"
                   alt="">
            </template>
            <template #title>
              <div class="positionName">{{item.PositionName}}</div>
            </template>
            <template #desc>
              <div class="site"> <span class="miaoshu"><span class="dle"></span>{{item.Area}}&nbsp;|&nbsp;{{item.Exp}}&nbsp;|&nbsp;{{item.Education}}&nbsp;|&nbsp;招{{item.PersonNum}}人<span class="dle"></span></span>
              </div>
              <div class="bom">
                <div class="time">{{item.CreateTime.substr(0,10)}}</div>
                <div class="money">{{item.Money}}</div>
                <div class="cle"></div>
              </div>
            </template>
            <!-- <template #tags>
          <van-tag plain
                   type="danger"
                   v-for="(item1,index1) in item.Tips.split(',')"
                   :key=index1>{{item1}}</van-tag>
        </template> -->
            <!-- <template #price>
          <div class="time">{{item.CreateTime.substr(0,10)}}</div>
        </template>
        <template #num>
          <div class="money">{{item.Money}}</div>
        </template> -->
          </van-card>
        </van-list>
      </div>
    </div>
  </div>
</template>
<script>
import proposer from "@/components/proposer"
import shouye from '@/assets/img/shouye.jpg'
// 导入uri
import uri from "@/config/uri";
export default {
  data () {
    return {
      // 判断是否旋转180deg
      pd: false,
      // 判断搜索框是否显示
      shows: false,
      // 添加下标做tab栏切换
      current: 0,
      // 详情部门数据
      xq: [
        ["IT", "财务", "人事", "业务", "行政"],
        ["北京", "上海", "深圳", "杭州"]
      ],
      //职能部门数据
      zhineng: ["职类", "城市", "搜索"],
      // 是否控制显示隐藏
      isShow: false,
      // 默认是否吸顶
      isSticky: false,
      // input数据
      value: '',
      // 引入首页图片地址
      shouye,
      // 接口数据
      arr: [],
      // tips: [],
      date: {},
      // 表示当前是否处于数据加载的时候
      loading: false,
      // 表示所有的数据是否全部加载完毕（如果其为true则即便滑动到底部也不会再触发异步请求）
      finished: false,
      // 页码
      pageindex: 1,
      // 获取页码
      page: {}
    }
  },
  components: {
    proposer
  },
  methods: {
    change (index) {
      this.current = index
      let vr = this.current
      this.pd = !this.pd
      //  先把所有非点击的下标的i旋转清空
      this.$refs.ic.forEach(function (item, index) {
        if (vr != index) {
          item.className = "el-icon-arrow-down"
        }
      })
      // 如果下标相等就给他添加一个旋转的效果
      if (this.current == index) {
        if (this.$refs.ic[index].className == "el-icon-arrow-down ico") {
          this.$refs.ic[index].className = "el-icon-arrow-down"
        } else if (this.$refs.ic[index].className == "el-icon-arrow-down") {
          this.$refs.ic[index].className = "el-icon-arrow-down ico"
        }
      }
      // console.log(this.$refs.ic[index].className)
      if (index == 2 && this.shows == true) {
        this.shows = false
      } else if (index == 2 && this.shows == false) {
        this.shows = true
      }
    },

    tiaozhuan (id) {
      // 点击跳转
      // this.$router.push("/detail/");
      let routeData = this.$router.resolve({
        path: "/phonedetail/",
        query: {
          id: id
        }
      });
      //必要操作，否则不会打开新页面
      window.open(routeData.href, '_blank');
    },
    // this.$router
    // 页面进来的时候和加载更多的时候都会触发
    onLoad () {
      // 请求数据
      let num = this.pageindex
      let data = { pageindex: num, pagesize: 10 }
      setTimeout(() => {
        this.$http.post(uri.getInfoList, data).then((res) => {
          this.page = res.data
          // console.log(res)

          if (res.state == 'success') {
            // 最大的页码数
            let maxPage = res.data.TotalPages;
            // 保存接口获取到的电影数据(不能覆盖)
            // this.film_list = res.data.films;
            // this.film_list.push(...res.data.films)
            this.arr = [...this.arr, ...res.data.Items];

            // 给页码加加
            if (this.pageindex < maxPage) {
              this.pageindex++;
            } else {
              // 没有数据了
              // 若数据已全部加载完毕，则直接将 `finished` 设置成 `true` 即可
              // 告诉list组件，后续再无数据，即便滚动条到达底部也不要再触发onload事件了
              this.finished = true;
            }
            // v-Lazy
            // 本次请求结束
            // 数据更新完毕后，将 `loading` 设置成 `false`
            // 本次请求结束如果不将其设置成false则无法进行下一次请求
            this.loading = false;
          } else {
            console.log("请求失败")
          }
        });
      }, 1000);
    },
    load () {
      this.$router.go(0)
    },
    search () {
      this.arr = "";
      let data = { pageindex: 1, pagesize: 9999, search: this.value + "" }
      this.$http.post(uri.getInfoList, data).then((res) => {
        this.arr = res.data.Items
        this.page = res.data
        // this.tips = this.arr.Tips.split(",")
        // console.log(this.arr)
      })
      this.isShow = true
    }
    // created () {
    //   let data = { pageindex: 1, pagesize: 10 }
    //   this.$http.post(uri.getInfoList, data).then((res) => {
    //     this.arr = res.data.Items
    //     console.log(this.arr)
    //   })
    // }
  },
  mounted () {
    // 监听滚动事件以实时获取滚动条高度
    addEventListener("scroll", () => {
      let scrollTop = document.documentElement.scrollTop;
      if (scrollTop >= 250) {
        // 固定顶部导航
        this.isSticky = true;
      } else {
        // 不固定顶部导航
        this.isSticky = false;
      }
    });
  },
}
</script>

<style scoped>
.active {
  background: black;
}
/* .zhezhao {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 30;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
} */
.van-loading__spinner {
  height: 50px;
}
.positionName {
  color: #0058a6;
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 7px;
}
.cle {
  clear: both;
}
.header {
  height: 250px;
}
/* /deep/  */
.nav {
  width: 100%;
  background: #f5f5f5;
  font-size: 14px;
  padding-bottom: 30px;
}
.nav .position {
  margin-left: 20px;
}
.nav .text {
  margin-right: 20px;
  color: #4e9ad8;
}
/deep/ .van-card {
  padding: 0px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  border-radius: 10px;
}
/deep/ .van-card__thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #e0e0e0;
}
.site {
  margin-bottom: 15px;
  font-size: 12px;
  color: #666;
}
.van-card__content {
  padding-right: 8px;
}
.time {
  font-size: 12px;
  color: #999;
  float: left;
}
.nav-bom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.money {
  font-size: 14px;
  color: #ff6000;
  float: right;
}
/deep/.van-field {
  width: 200px;
  border: 1px solid #e0e0e0;
  border-top-left-radius: 21px;
  border-bottom-left-radius: 21px;
  padding: 5px 16px;
  flex-grow: 5;
}
.nav-top {
  margin-bottom: 12px;
  background: #9b0f15;
  height: 45px;
}
.nav-cen {
  display: flex;
  padding: 0 15px;
  margin-bottom: 15px;
}
.van-button {
  height: 36px;
  border-top-right-radius: 21px;
  border-bottom-right-radius: 21px;
  flex-grow: 1;
}
.sticky {
  position: fixed;
  z-index: 999;
  top: 0;
  width: 100%;
}
.box {
  background: #e5e7ea;
}
.box-c {
  padding: 8px 1% 0;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
/deep/.el-dropdown-link {
  color: #ffffff;
  font-weight: 900;
  font-size: 16px;
}
/deep/.el-dropdown-link i {
  font-size: 16px;
}
/deep/.el-dropdown-selfdefine {
  display: block;
}
/deep/.el-dropdown {
  height: 100%;
  width: 33.333%;
  line-height: 45px;
  text-align: center;
}
/deep/.el-icon-arrow-down {
  transition: all 0.2s linear;
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
}
.ico {
  transition: all 0.2s linear;
  transform: rotate(180deg);
}
/* el-dropdown */
/* nav-top */
</style>